<template>
  <div class="container">
    <div class="top">
      <el-card>
        <!-- 查询条件 -->
        <el-form ref="queryFormRef" :model="queryForm" label-width="100px">


          <el-row :gutter="12">
            <!-- <el-col :span="4">
              <el-form-item label="地点：" prop="local">
                <el-input v-model="queryForm.local"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="4">
              <el-form-item label="模式：" prop="model">
                <el-input v-model="queryForm.model"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="起始时间：" prop="patrolStart">
                <el-date-picker
                  v-model="queryForm.patrolStart"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="" prop="patrolEnd">
                <el-date-picker
                  v-model="queryForm.patrolEnd"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <!-- <el-col :span="4">
                <el-form-item label="时间：" prop="time">
                    <el-date-picker
                        v-model="queryForm.timeArr"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-col> -->
            <el-col :span="2">
              <el-form-item>
                <el-button style="margin-left: 66px" @click="resetForm" type="primary" plain>重置</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button style="margin-left: 60px"  @click="add()" type="success" plain>新增数据</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="middle">
      <el-table ref="multipleTable" :data="tableData" stripe tooltip-effect="dark" style="width: 100%">
        <!-- <el-table-column label="地点" prop="local" width="130px"></el-table-column> -->
        <el-table-column label="模式" prop="model" width="130px"></el-table-column>
        <el-table-column label="时间" prop="time" width="260px"></el-table-column>

        <el-table-column label="理由" prop="reason" width="190px"></el-table-column>
        <el-table-column label="具体描述" prop="description" width="400px"></el-table-column>
        <el-table-column :formatter='logisticDescData' label="是否切换" prop="flag" width="90px"></el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button tye="success"  size="mini" @click="qh(scope.row)">切换</el-button>
            <el-button tye="success"  size="mini" @click="qhmb(scope.row)">切换模板</el-button>
            <el-button type="success"  size="mini" @click="update(scope.row)">修改</el-button>
            <el-button type="danger"  size="mini" @click="deleteh(scope.row)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :visible.sync="addialog"
      width="32%"
      :before-close="cancel"
    >

            <span slot="footer" class="dialog-footer">
                <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="地点" prop="local">
                    <el-input v-model="form.local"></el-input>
                </el-form-item>
                <el-form-item label="模式" prop="model">
                    <el-input v-model="form.model"></el-input>
                </el-form-item>
              <el-form-item label="开始时间" prop="time">
                <el-date-picker
                  style="width: 100%"
                  align="center"
                  v-model="form.time"
                  type="datetime"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
                <el-form-item label="原因" prop="reason">
                    <el-input v-model="form.reason"></el-input>
                </el-form-item>

                <el-form-item label="描述" prop="description">
                    <el-input v-model="form.description"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="addSave" v-if="addflag">保存新增</el-button>
                    <el-button type="primary" @click="updateSave" v-if="updateflag">保存更新</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
                </el-form>


            </span>
    </el-dialog>


    <el-dialog
      :visible.sync="qhmbflag"
      width="32%"
      :before-close="cancelmb"
    >

            <span slot="footer" class="dialog-footer">
                <el-form ref="form" :model="form" label-width="120px">

                <el-form-item label="模式" prop="model">
                  <el-radio v-model="form.model" label="外模式">外模式</el-radio>
                  <el-radio v-model="form.model" label="逻辑模式">逻辑模式</el-radio>
                  <el-radio v-model="form.model" label="存储模式">存储模式</el-radio>
<!--                  <el-radio v-model="form.model" label="A">A</el-radio>-->
<!--                  <el-radio v-model="form.model" label="B">B</el-radio>-->
<!--                  <el-radio v-model="form.model" label="C">C</el-radio>-->
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="updateSavemb" >保存更新</el-button>
                    <el-button @click="cancelmb">取消</el-button>
                </el-form-item>
                </el-form>


            </span>
    </el-dialog>

  </div>
</template>

<script>
  window._interceptConfig = {
    collection: true, //整体开关
    click: true, //页面点击事件信息采集开关
    page: true, //页面跳转加载事件信息采集开关
    error: true, //异常信息采集开关
    http: true, //通讯信息采集开关
    name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
    url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
  };
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
  //          "@/api/system/inspection"
  import { queryInspectionAdgTemplate,scInspectionTaskTemplate,scInspectionQhTemplate ,addInspectionAdgTemplate,scInspectionAdgTemplate,delInspectionAdgTemplate, queryInspectionAdgTemplateById} from "@/api/system/inspection"
  export default {
    name: 'Hisreport',
    data() {
      return {
        qhmbflag:false,
        timer: null,//用作延迟
        // 表格数据
        tableData: null,
        // 查询参数
        updateflag:false,
        addflag:false,
        addialog:false,
        queryForm: {
          local: "",
          model: "",
          patrolStart: "",
          patrolEnd: "",
          reason: "",
          description: "",
          flag: "",
          status:"",
        },
        form: {
          id:"",
          local: "",
          model: "",
          time:"",
          reason: "",
          description: "",
          flag: "",
          status:"",
        },

      }
    },
    methods: {
      logisticDescData(row){
        if(row.flag == '0'){
          return "正在使用";
        }else {
          return "未使用";
        }
      },
      add(){
        this.addialog=true
        this.addflag=true
        this.updateflag=false
      },
      copy(){
        clearTimeout(this.timer);
        //设置延迟执行,这里设置延迟两秒执行
        this.timer = setTimeout(()=>{

          this.$alert('复制成功', '镜像复制', {
            confirmButtonText: '确定',
          });


        },1500);
        this.getList()
      },
      deleteh(row){

        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delInspectionAdgTemplate(row).then(res=>{
            this.$alert(res.msg, '提示', {
            });
            this.getList()
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      qh(row){

        this.$confirm('此操作将切换数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          scInspectionQhTemplate(row).then(res=>{
            this.$alert(res.msg, '提示', {
            });
            this.getList()
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消切换'
          });
        });
      },

      qhmb(row){
        queryInspectionAdgTemplateById(row).then(res=>{
          this.form=res.data
        })
        this.qhmbflag = true;
      },



      scReport(row){

        this.$confirm('此操作将生成该任务巡检报告, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          scInspectionTaskTemplate(row).then(res=>{

            this.$alert(res.msg, '提示', {
            });
            this.getList()
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },

      updateSave(){
        scInspectionAdgTemplate(this.form).then(res=>{
          this.$alert(res.msg, '提示', {
          });
          this.addialog=false

          this.getList()
        })

      },

      updateSavemb(){
        scInspectionAdgTemplate(this.form).then(res=>{
          this.$alert(res.msg, '提示', {
          });
          this.qhmbflag = false

          this.getList()
        })

      },

      addSave(){
        addInspectionAdgTemplate(this.form).then(res=>{
          this.$alert(res, '提示', {

          });
          this.addialog=false
          this.$refs['form'].resetFields()
          this.getList()

        })

      },
      cancel(){
        this.$refs['form'].resetFields()
        this.addialog=false

      },
      cancelmb(){
        this.$refs['form'].resetFields()
        this.qhmbflag = false

      },
      getList(){
        queryInspectionAdgTemplate(this.queryForm).then(response => {

          this.tableData = response.data
        })
      },
      // 加载数据
      initData() {
        queryInspectionAdgTemplate(this.queryForm).then(response => {

          this.tableData = response.data
        })
      },
      update(row){

        queryInspectionAdgTemplateById(row).then(res=>{
          this.form=res.data
        })
        this.updateflag=true
        this.addflag=false
        this.addialog=true
      },



      // 重置表单
      resetForm(){
        this.$refs.queryFormRef.resetFields()
      },

    },
    mounted() {
      this.initData()
    },
    watch:{
      //侦听queryForm
      queryForm:{
        deep: true,
        handler(newValue,oldValue){
          this.initData()
        }
      }
    }
  }

</script>

<style>

  .middle {
    margin: 10px;
    width: 100%;
  }
</style>
